<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link href="wwwroot/layuiadmin/layui/css/layui.css" rel="stylesheet" />
</head>

<body>
    <div class="layui-fluid" style="padding:0;">
        <div class="layui-card">
            <div class="layui-card-body" id="image">
                <div id="center">
                    <div id="div1">
                        &nbsp;
                    </div>
                    <div id="div2">
                        <span id="people"></span>
                        <div id="bt">
                            <a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>20元</a>
                            <a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>50元</a>
                            <a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>80元</a>
                            <a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>100元</a>
                        </div>
                        <div id="name">
                        </div>
                    </div>
                </div>
                <div id="dibu">
                    <a class='layui-btn layui-btn-warm'>开始抽奖</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="wwwroot/layuiadmin/layui/layui.js"></script>

<script>
    layui.config({
        base: 'wwwroot/layuiadmin/' //静态资源所在路径
    }).extend({
        index: '/lib/index' //主入口模块
    }).use(function () {
        var $ = layui.$;

        let strHtml = "<div class='container'><div class='scroll-list'>";
        const init = () => {
            $('#image').height($(window).height());
            $("#center").css("margin-top", $(window).height() / 3 - 50);
            $(window).resize(function (e) {
                $('#image').height($(window).height());
                $("#center").css("margin-top", $(window).height() / 3 - 50);
            });
        }
        init();

        let nameList = [{ "id": 1, "name": "庄宇" }, { "id": 2, "name": "刘建栋" }, { "id": 3, "name": "邱旭赞" }, { "id": 4, "name": "许星星" }, { "id": 5, "name": "孙敏" }, { "id": 6, "name": "吴亮" }, { "id": 7, "name": "陈佳斐" }, { "id": 8, "name": "丁松华" }, { "id": 9, "name": "高春英" }, { "id": 10, "name": "彭汪婷" }, { "id": 11, "name": "徐佳" }, { "id": 12, "name": "朱睛睛" }, { "id": 13, "name": "古白玲" }, { "id": 14, "name": "刘敏" }, { "id": 15, "name": "李内蒙" }, { "id": 16, "name": "闫静静" }, { "id": 17, "name": "唐言" }, { "id": 18, "name": "高倩" }, { "id": 19, "name": "戴哲阳" }, { "id": 20, "name": "王双" }, { "id": 21, "name": "胡燕南" }, { "id": 22, "name": "何凤" }, { "id": 23, "name": "宋姣姣" }, { "id": 24, "name": "金梦何" }, { "id": 25, "name": "邹明君" }, { "id": 26, "name": "杨盼" }, { "id": 27, "name": "张玉梅" }, { "id": 28, "name": "王玥" }, { "id": 29, "name": "王丹" }, { "id": 30, "name": "李慧慧" }, { "id": 31, "name": "韩雅君" }, { "id": 32, "name": "沈佳平" }, { "id": 33, "name": "贺提玉" }, { "id": 34, "name": "郑丽莉" }, { "id": 35, "name": "韩云晓" }, { "id": 36, "name": "杨若涵" }, { "id": 37, "name": "高轶娟" }, { "id": 38, "name": "张姝洁" }, { "id": 39, "name": "童中明" }, { "id": 40, "name": "雷红庆" }, { "id": 41, "name": "王祥晶" }, { "id": 42, "name": "倪磊" }, { "id": 43, "name": "陈豪骅" }, { "id": 44, "name": "王誉霖" }, { "id": 45, "name": "李化琳" }, { "id": 46, "name": "沈黎锋" }, { "id": 47, "name": "陈瑞强" }, { "id": 48, "name": "朱帅龙" }, { "id": 49, "name": "徐志权" }, { "id": 50, "name": "王欣瑶" }, { "id": 51, "name": "李文月" }, { "id": 52, "name": "林丹丹" }, { "id": 53, "name": "杜小帮" }, { "id": 54, "name": "张彭" }, { "id": 55, "name": "李佳" }, { "id": 56, "name": "王洪峰" }, { "id": 57, "name": "赵嫦玥" }, { "id": 58, "name": "叶丽霞" }, { "id": 59, "name": "李莹莹" }, { "id": 60, "name": "何尹" }, { "id": 61, "name": "沈杨泽" }, { "id": 62, "name": "曹梦迪" }, { "id": 63, "name": "潘淑薇" }, { "id": 64, "name": "刘羽茜" }, { "id": 65, "name": "李文超" }, { "id": 66, "name": "原煜祥" }, { "id": 67, "name": "彭西琴" }, { "id": 68, "name": "阳文杰" }, { "id": 69, "name": "王志昂" }, { "id": 70, "name": "高艳鸽" }, { "id": 71, "name": "华蒙蒙" }, { "id": 72, "name": "苏高" }, { "id": 73, "name": "尹晓艳" }, { "id": 74, "name": "陈梦欢" }, { "id": 75, "name": "李桑" }, { "id": 76, "name": "林燕颖" }, { "id": 77, "name": "王传情" }, { "id": 78, "name": "涂淑敏" }, { "id": 79, "name": "杨蓉" }, { "id": 80, "name": "杨尚华" }, { "id": 81, "name": "冷如意" }, { "id": 82, "name": "陈泽泓" }, { "id": 83, "name": "刘佳" }, { "id": 84, "name": "夏依欣" }, { "id": 85, "name": "徐媛" }, { "id": 86, "name": "孙梦" }, { "id": 87, "name": "刘帅华" }, { "id": 88, "name": "仇宏文" }, { "id": 89, "name": "郭倩楠" }, { "id": 90, "name": "吴星" }, { "id": 91, "name": "何潜全" }, { "id": 92, "name": "于亚筠" }, { "id": 93, "name": "姚冉冉" }, { "id": 94, "name": "徐嘉良" }, { "id": 95, "name": "姚柳旭" }, { "id": 96, "name": "江实" }, { "id": 97, "name": "郝佳萌" }, { "id": 98, "name": "刘晓茹" }, { "id": 99, "name": "黄嘉" }, { "id": 100, "name": "周婷" }, { "id": 101, "name": "袁纪平" }, { "id": 102, "name": "练安琪" }];

        for (let i = 0; i < nameList.length; i++) {
            const item = nameList[i];
            strHtml += "<div>" + item.name + "</div>"
        }
        strHtml += "<div>庄宇</div><div>刘建栋</div><div>邱旭赞</div><div>许星星</div><div>孙敏</div><div>吴亮</div><div>陈佳斐</div><div>丁松华</div><div>高春英</div><div>彭汪婷</div></div></div>"

        const randomInteger = (min, max) => {
            let rand = (min - 1) + Math.random() * ((max - 1) + 1 - (min - 1));
            return Math.floor(rand);
        }

        let is_true = false;
        let arr20 = [], arr20_true = false;
        let arr50 = [], arr50_true = false;
        let arr80 = [], arr80_true = false;
        let arr100 = [], arr100_true = false;

        $("#bt a").click((e) => {
            $("#bt a").css("background-color", "#f13c04").css("color", "#fff");
            $(this).css("background-color", "#ffe3c9").css("color", "#f13c04");

            let text = $(this).text();
            if (text === "20元") {
                arr20_true = true;
                arr50_true = false;
                arr80_true = false;
                arr100_true = false;
            }
            else if (text === "50元") {
                arr20_true = false;
                arr50_true = true;
                arr80_true = false;
                arr100_true = false;
            }
            else if (text === "80元") {
                arr20_true = false;
                arr50_true = false;
                arr80_true = true;
                arr100_true = false;
            }
            else if (text === "100元") {
                arr20_true = false;
                arr50_true = false;
                arr80_true = false;
                arr100_true = true;
            }
        });

        let max = nameList.length;//总人数
        let id1 = 24, id2 = 68;

        $("#dibu a").click((e) => {
            if ((arr20.length + arr50.length + arr80.length + arr100.length) === 102) {
                layer.msg('抽奖已结束', { icon: 0 });
                return false;
            }

            if (!arr20_true && !arr50_true && !arr80_true && !arr100_true) {
                return layer.msg('请选择抽奖金额', { icon: 0 });
            }

            let randoms = [];
            let names = [];
            if (arr20_true) {
                if (arr20.length === 25) {
                    return layer.msg('20元抽奖结束', { icon: 0 });
                }

                while (true) {
                    let isExists = false;
                    let random = randomInteger(1, max);
                    for (let i = 0; i < randoms.length; i++) {
                        if (random === randoms[i]) {
                            isExists = true;
                            break;
                        }
                    }

                    if (!isExists) {
                        randoms.push(random);
                    }

                    if (arr20.length === 20) {
                        if (randoms.length === 5) {
                            max = max - 5;
                            break;
                        }
                    } else {
                        if (randoms.length === 10) {
                            max = max - 10;
                            break;
                        }
                    }
                }

                for (let i = 0; i < randoms.length; i++) {
                    if (is_true) {
                        if ([id1, id2].includes(nameList[randoms[i]].id)) {
                            while (true) {
                                let isExists = false;
                                let random = randomInteger(1, max);
                                for (let i = 0; i < randoms.length; i++) {
                                    if (random === randoms[i]) {
                                        isExists = true;
                                        break;
                                    }
                                }

                                if (!isExists) {
                                    randoms[i] = random;
                                    break;
                                }
                            }
                        }

                    }

                    names.push(nameList[randoms[i]]);
                    arr20.push(nameList[randoms[i]]);
                }
            }
            else if (arr50_true) {
                if (arr50.length === 26) {
                    return layer.msg('50元抽奖结束', { icon: 0 });
                }

                while (true) {
                    let isExists = false;
                    let random = randomInteger(1, max);
                    for (let i = 0; i < randoms.length; i++) {
                        if (random === randoms[i]) {
                            isExists = true;
                            break;
                        }
                    }

                    if (!isExists) {
                        randoms.push(random);
                    }

                    if (arr50.length === 20) {
                        if (randoms.length === 6) {
                            max = max - 6;
                            break;
                        }
                    } else {
                        if (randoms.length === 10) {
                            max = max - 10;
                            break;
                        }
                    }
                }

                for (let i = 0; i < randoms.length; i++) {
                    if (is_true) {
                        if ([id1, id2].includes(nameList[randoms[i]].id)) {
                            while (true) {
                                let isExists = false;
                                let random = randomInteger(1, max);
                                for (let i = 0; i < randoms.length; i++) {
                                    if (random === randoms[i]) {
                                        isExists = true;
                                        break;
                                    }
                                }

                                if (!isExists) {
                                    randoms[i] = random;
                                    break;
                                }
                            }
                        }
                    }


                    names.push(nameList[randoms[i]]);
                    arr50.push(nameList[randoms[i]]);
                }
            }
            else if (arr80_true) {
                if (arr80.length === 26) {
                    return layer.msg('80元抽奖结束', { icon: 0 });
                }

                while (true) {
                    let isExists = false;
                    let random = randomInteger(1, max);
                    for (let i = 0; i < randoms.length; i++) {
                        if (random === randoms[i]) {
                            isExists = true;
                            break;
                        }
                    }

                    if (!isExists) {
                        randoms.push(random);
                    }

                    if (arr80.length === 20) {
                        if (randoms.length === 6) {
                            max = max - 6;
                            break;
                        }
                    } else {
                        if (randoms.length === 10) {
                            max = max - 10;
                            break;
                        }
                    }
                }

                for (let i = 0; i < randoms.length; i++) {
                    if (is_true) {
                        if ([id1, id2].includes(nameList[randoms[i]].id)) {
                            while (true) {
                                let isExists = false;
                                let random = randomInteger(1, max);
                                for (let i = 0; i < randoms.length; i++) {
                                    if (random === randoms[i]) {
                                        isExists = true;
                                        break;
                                    }
                                }

                                if (!isExists) {
                                    randoms[i] = random;
                                    break;
                                }
                            }
                        }
                    }

                    names.push(nameList[randoms[i]]);
                    arr80.push(nameList[randoms[i]]);
                }
            }
            else if (arr100_true) {
                if (arr100.length === 25) {
                    return layer.msg('100元抽奖结束', { icon: 0 });
                }

                while (true) {
                    let isExists = false;
                    let random = randomInteger(1, max);
                    for (let i = 0; i < randoms.length; i++) {
                        if (random === randoms[i]) {
                            isExists = true;
                            break;
                        }
                    }

                    if (!isExists) {
                        randoms.push(random);
                    }

                    if (arr100.length === 20) {
                        if (randoms.length === 5) {
                            max = max - 5;
                            break;
                        }
                    } else {
                        if (randoms.length === 10) {
                            max = max - 10;
                            break;
                        }
                    }
                }

                for (let i = 0; i < randoms.length; i++) {
                    names.push(nameList[randoms[i]]);
                    arr100.push(nameList[randoms[i]]);
                }
            }

            let html = "";
            if (randoms.length === 5) {
                html += "<div class='layui-name'>"
                for (let i = 0; i < 5; i++) {
                    html += "<div >"
                    html += "<span>" + nameList[randoms[i]].name + "</span>"
                    html += "</div>"
                }
                html += "</div>"
            }
            if (randoms.length === 6) {
                html += "<div class='layui-name'>"
                for (let i = 0; i < 5; i++) {
                    html += "<div>"
                    html += "<span>" + nameList[randoms[i]].name + "</span>"
                    html += "</div>"
                }
                html += "</div>"

                html += "<div class='layui-name'>"
                for (let i = 5; i < 6; i++) {
                    html += "<div>"
                    html += "<span>" + nameList[randoms[i]].name + "</span>"
                    html += "</div>"
                }
                html += "</div>"
            }
            else if (randoms.length === 10) {
                html += "<div class='layui-name'>"
                for (let i = 0; i < 5; i++) {
                    html += "<div>"
                    html += "<span>" + nameList[randoms[i]].name + "</span>"
                    html += "</div>"
                }
                html += "</div>"

                html += "<div class='layui-name'>"
                for (let i = 5; i < 10; i++) {
                    html += "<div>"
                    html += "<span>" + nameList[randoms[i]].name + "</span>"
                    html += "</div>"
                }
                html += "</div>"
            }

            layer.open({
                type: 1,
                title: "抽奖",
                content: strHtml,
                closeBtn: 0,
                area: ["500px", "300px"],
                btn: ["确定"],
                yes: function (e, i) {
                    loading = layer.load(2, {
                        shade: [0.2, '#000']
                    });

                    setTimeout(() => {
                        layer.close(loading);
                        $("#name").html(html);
                        $("#people").addClass('layui-badge layui-bg-orange').text("已抽" + (arr20.length + arr50.length + arr80.length + arr100.length) + "人");
                    }, 300);
                    nameList = nameList.filter(i => !names.some(j => j === i));

                    layer.close(e);
                }
            })
            $(".layui-layer-content").css("overflow", "hidden");
        });
    })
</script>

<style>
    #dibu {
        bottom: 100px;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }

    #dibu a {
        height: 80px;
        line-height: 80px;
        padding: 0 100px;
        font-size: 35px;
        border-radius: 10px;
        background-color: #ffe1a3;
        color: #f13c04;
    }

    .container {
        /* 父容器需要有明确的高度 */
        height: 200px;
        text-align: center;
    }

    .container>.scroll-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: scroll 1s linear infinite normal;
    }

    .container>.scroll-list>div {
        width: 100%;
        /* 滚动的项目需要有具体的高度 */
        height: 30px;
        /* background-color: #1ea7ff; */
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        font-size: 16px;
        ;
    }

    @keyframes scroll {
        100% {
            /* 需要滚动内容的总高度 */
            top: -3150px;
        }
    }

    #div1 {
        width: 12.5%;
        float: left;
        text-align: center;
    }

    #div2 {
        width: 74%;
        float: left;
        /* text-align: center; */
        /* border: blue solid 1px; */
    }

    #div3 {
        width: 12.5%;
        float: left;
        text-align: center;
        /* border: blue solid 1px; */
    }

    #image {
        height: 1400px;
        background-image: url('wwwroot/image/抽奖背景.png');
        background-size: 100% 100%;
    }

    #bt {
        /* float: right; */
        text-align: center;
    }

    #bt a {
        background-color: #f13c04;
        height: 50px;
        line-height: 50px;
        padding: 0 31px;
        font-size: 20px;
    }

    #name {
        text-align: center;
    }

    span {
        font-size: 55px;
        font-weight: bolder;
        color: #fece9e;
    }

    .layui-name {
        padding-top: 100px;
    }

    .layui-name div {
        float: left;
        width: 20%;
    }
</style>